<template>
  <div class="music-home">
            <el-header>
      <Header></Header>
    </el-header>
  <el-container direction="horizontal">
      <el-aside  style="width: 220px!important;">
        <menus-list></menus-list>
      </el-aside>
        <el-main style="padding: 0!important;height: 630px;overflow: hidden;">
          <music-main v-show="!$store.state.MusicStore.isMusicDetailCardShow"></music-main>
        </el-main>
    <BottomControl></BottomControl>
<music-detail-card class="musicDetailCard"></music-detail-card>
  </el-container>
  </div>

</template>

<script>
import Header from "./TopHeader";
import musicMain from "./musicMain";
import MenusList from "./MenusList";
import BottomControl from "../../../components/BottomControl/BottomControl";
import MusicDetailCard from "../MusicDetailCard/MusicDetailCard";
export default {
  name: "index",
  data() {
    return {
      isShowLoginFrame:false
    }
  },
  components: {
    Header,
    musicMain,
    MenusList,
    BottomControl,
    MusicDetailCard,
  },
}
</script>

<style scoped lang="less">
.music-home {
  width: 100%;
  height: 98%;
  .el-header{
    padding: 0;
  }

}

</style>
